<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider
      v-model="collapsed"
      :trigger="null"
      collapsible
      theme="light"
      style="background: #fff"
      width="200px"
      class="sider"
      :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }"
    >
      <div class="logo" :style="collapsed ? 'width:80px' : 'width:200px'">
        <img src="../assets/img/log.png" alt="" />
      </div>
      <!-- 菜单 -->
      <Menus :collapsed="collapsed" />
    </a-layout-sider>
    <a-layout :style="collapsed ? 'margin-left:80px' : 'margin-left:200px'">
      <a-layout-header
        style="
          background: #fff;
          padding: 0 20px;
          display: flex;
          justify-content: space-between;
        "
      >
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="changeCollapsed"
        />
        <div class="top-right">
          <!-- 站内搜索 -->
          <!-- 消息提示 -->

          <!-- <span
            ><a
              target="_blank"
              href="https://usbanyan-image-chengdu.oss-cn-chengdu.aliyuncs.com/operation/manual/zxy_21_005_%E5%A4%A7%E6%A6%95%E6%A0%91%E6%B5%B7%E5%A4%96%E4%BB%93PDA%E7%AE%A1%E7%90%86%E7%AB%AF%E8%BD%AF%E4%BB%B6V2.0.1.pdf"
              >PDA操作手册</a
            ></span
          > -->
          <!-- <HeaderNotice /> -->

          <!-- //个人头像 -->
          <div>
            <a-dropdown>
              <a-menu slot="overlay" @click="userBtn">
                <!-- <a-menu-item key="1">
                  <a-icon type="user" />个人中心
                </a-menu-item> -->
                <!-- <a-menu-item key="2"> <a-icon type="user" />设置 </a-menu-item> -->
                <!-- <a-menu-divider /> -->
                <a-menu-item key="3">
                  <a-icon type="logout" />退出登录
                </a-menu-item>
              </a-menu>
              <div style="margin-left: 8px">
                <a-avatar size="small" icon="user" />
                <span>{{ userName }}</span>
              </div>
            </a-dropdown>
          </div>
          <!-- 切换中英文 -->
          <div>
            <a-dropdown>
              <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item key="1"> 简体中文 </a-menu-item>
                <a-menu-item key="2"> English </a-menu-item>
              </a-menu>
              <span style="margin-left: 8px">
                <a-icon type="sort-ascending" />{{ $t("m.language") }}
              </span>
            </a-dropdown>
          </div>
        </div>
      </a-layout-header>
      <div class="tag">
        <!-- 面包屑导航 -->
        <!-- <Breadcumb /> -->
      </div>
      <!-- 内容区 -->
      <Tags />
      <a-layout-content
        :style="{
          margin: '0px 0 0 16px',
          padding: '24px 0 24px 24px',
          background: '#fff',
          height: '100%',
        }"
      >
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </a-layout-content>
    </a-layout>
    <!-- //版本号 -->
    <div class="version" style="right: 20px">
      <span @click="visible = true" style="cursor: pointer">V2.2.0</span>
      <a-modal v-model="visible" title="版本更新记录">
        <template slot="footer">
          <a-button @click="visible = false">知道了</a-button>
        </template>
        <Version :collapsed="collapsed" />
      </a-modal>
    </div>
    <div class="version" style="right: 100px">
      <span @click="visible1 = true" style="cursor: pointer">PDA V1.0.6</span>
      <a-modal v-model="visible1" title="版本更新记录">
        <template slot="footer">
          <a-button @click="visible1 = false">知道了</a-button>
        </template>
        <VersionPDA :collapsed="collapsed" />
      </a-modal>
    </div>
  </a-layout>
</template>
<script>
import { accGetCrs, warehouse, getByCrsWh, tenantService } from "@/apis/common";
// import { addOnlineTime } from "../apis/common";
import Version from "@/views/Version.vue";
import VersionPDA from "@/views/VersionPDA.vue";
// import HeaderNotice from "@/components/header/HeaderNotice";
import Menus from "@/components/menus/Menus";
import Tags from "@/components/header/HeaderTags.vue";
export default {
  components: {
    Menus,
    // HeaderNotice,
    Tags,
    Version,
    VersionPDA,
  },
  created() {
    //调取通用接口
    this.getCommentArray();
    this.userName = sessionStorage.getItem("username");
    // this.dateTime = setInterval(async () => {
    //   let res = await addOnlineTime();
    //   res;
    // }, 300000);
  },
  destroyed() {
    // clearInterval(this.dateTime);
  },
  data() {
    return {
      dateTime: null,
      visible: false,
      visible1: false,
      collapsed: false,
      userName: "",
      windowWidth: document.body.clientWidth, //实时屏幕宽度
    };
  },
  mounted() {
    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        window.fullWidth = document.documentElement.clientWidth;
        that.windowWidth = window.fullWidth; // 宽
      })();
    };
  },
  methods: {
    changeCollapsed() {
      this.collapsed = !this.collapsed;
    },
    //个人中心选项
    userBtn(e) {
      if (e.key == 3) {
        sessionStorage.clear();
        this.$router.push("/login");
        this.$message.success("退出登录成功");
      }
    },
    //切换中英文
    handleMenuClick(e) {
      if (e.key == 1) {
        setTimeout(() => {
          this.$bus.$emit("zn");
        }, 2);
        this.$i18n.locale = "zn";
      } else if (e.key == 2) {
        setTimeout(() => {
          this.$bus.$emit("en");
        }, 2);
        this.$i18n.locale = "en";
      }
    },
    //调取通用接口
    async getCommentArray() {
      //客户编号
      let { code, responseBody } = await accGetCrs();
      if (code === "200") {
        // this.accArray = responseBody;
        this.$store.commit("ACCARRAY", responseBody);
      }
      //仓库
      let res = await warehouse({
        warehousePid: 0,
      });
      if (res.code === "200") {
        this.$store.commit("WAREHOUSE", res.responseBody);
      }
      //调取客户仓库接口
      let clientWareHouseCode = await getByCrsWh();
      if (clientWareHouseCode.code === "200") {
        this.$store.commit("CLIENTWAREHOUSE", clientWareHouseCode.responseBody);
      }
      //根据客户查询物流商
      let logistics = await tenantService(sessionStorage.getItem("tenantId"));
      if (logistics.code === "200") {
        this.$store.commit("LOGISTICS", logistics.responseBody);
      }
    },
  },
  watch: {
    windowWidth(val) {
      this.windowWidth = val;
      if (val <= 1280) {
        this.collapsed = true;
      } else {
        this.collapsed = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.version {
  position: fixed;
  bottom: 10px;
  font-size: 18px;
  z-index: 999;
}
.ant-tabs .ant-tabs-top-content,
.ant-tabs .ant-tabs-bottom-content {
  height: 100% !important;
}
.ant-layout {
  background: #f1f2f6 !important;
}
.top-right {
  display: flex;
  align-items: center;
  justify-content: space-between;

  div {
    text-align: center;
    width: auto;
    cursor: pointer;
    margin: 0 8px;
  }
  div:hover {
    background: #f9f9f9;
  }
}
.tag {
  margin: 10px 16px;
  margin-bottom: 0;
  padding-left: 10px;
  /* padding: 10px; */
}
/* aside阴影 */
.sider {
  box-shadow: 2px 0 8px #ccc !important;
}
/* header阴影 */
.ant-layout-header {
  box-shadow: 0 2px 8px #ccc;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #13c2c2;
}

#components-layout-demo-custom-trigger .logo {
  width: 200px;
  height: 64px;
  z-index: 999;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 5px -2px #ccc;
  overflow: hidden;
  margin-bottom: 10px;
  position: fixed;
  img {
    // height: 64px;
    width: 120%;
    // display: none;
    // height: 60px;
  }
}
</style>
